<!DOCTYPE HTML>
<html>
 <head>
  <title> 表单分组</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
  <div class="container">
    <div class="row">
      <div class="span16">
        <h2>简介</h2>
        <p>在表单中，我们常遇到多个字段关联的场景：</p>
        <ol>
          <li>选择框联动</li>
          <li>多文件异步上传</li>
        </ol>
        <p>在联动过程中经常会有跟分组相关的验证，参看<a class="page-action" data-id="valid" href="#">基本验证</a>和<a class="page-action" data-id="advalid" href="#">复杂验证</a>,而在分组中我们内嵌了基本的分组验证。</p>
      </div>
    </div>
    <div class="row">
      <div class="span8">
        <h2>联动框</h2>
        <p>选择框联动在很多场景下都会使用，我们提供了以下形式：</p>
        <ol>
          <li>通过指定url加载数据</li>
          <li>复用存在的级联框类型</li>
          <li>支持jsonp数据源</li>
          <li>数据在页面上</li>      
        </ol>

      </div>
      <div class="span16">
        <h3>配置项以及数据格式</h3>
        <p>通用的配置项如下：</p>
        <ol>
          <li><code>url</code>: 加载数据的URL。</li>
          <li><code>data</code>: 直接配置加载的数据，不使用url时使用。</li>
          <li><code>type</code>：级联选择框的类型，可以复用的级联选择框类型。</li>
        </ol>
        <p>返回的数据格式是一个数组或者对象，如果是一个对象那么格式{nodes:[],hasError:false}</p>
        <p>数组内的数据值的字段有：</p>
        <ol>
          <li><code>id</code>：选项的值</li>
          <li><code>text</code>: 选项的文本</li>
          <li><code>leaf</code>: 是否叶子节点，如果是叶子节点一定进行配置。默认为false</li>
          <li><code>children</code>: 子节点的数据</li>
        </ol>
        <p><span class="label label-warning">注意</span>：选择框的初始值可以配置在 <code>select</code>上使用 <code>value</code>属性。</p>
      </div>
    </div>
    <div class="row">
      <div class="span8">
        <h3>配置url方式</h3>
        <p>一般的级联选择框只需要配置<code>url</code>即可，在DOM上配置<code>data-url</code></p>
        <p>如果数据里面设置<code>leaf:false</code>，当选中此节点时，会请求下一级数据,附加变量<code>{id:'id'}</code></p>
      </div>
      <div class="span16">
        <h3>示例</h3>
        <form id="J_Form3">
          <div class="bui-form-group-select" data-url="../data/city.json">
            <label>省市联动：</label>
            <select class="input-small" name="province" value="1">
              <option>请选择省</option>
            </select>
            <select class="input-small"  name="city" value="12"><option>请选择市</option></select>
            <select class="input-small"  name="county" value="121"><option>请选择县/区</option></select>
          </div>
        </form>

        <pre class="prettyprint linenums">
&lt;div class="bui-form-group-select" data-url="../data/city.json"&gt;
  &lt;label&gt;省市联动：&lt;/label&gt;
  &lt;select class="input-small" name="province" value="1"&gt;
    &lt;option&gt;请选择省&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="input-small"  name="city" value="12"&gt;&lt;option&gt;请选择市&lt;/option&gt;&lt;/select&gt;
  &lt;select class="input-small"  name="county" value="121"&gt;&lt;option&gt;请选择县/区&lt;/option&gt;&lt;/select&gt;
&lt;/div&gt;
        </pre>
      </div>
    </div>
    <div class="row">
      <div class="span8">
        <h3>更加复杂的配置项</h3>
        <p>如果我们使用的url不是同域的，那么发送异步请求时需要配置<code>dataType:'jsonp'</code>。</p>
        <p>如果现有的数据格式跟返回值不一致，必须得返回的数据进行匹配。</p>
        <p>详细信息请参看：TreeStore</p>
      </div>
      <div class="span16">
        <h3>示例</h3>
        <p>当表单分组用JS直接生成时：</p>
        <pre class="prettyprint linenums">
//创建数据缓冲类
var store = new BUI.Data.TreeStore({
  proxy : {//加载数据的配置项
    url : '',
    dataType : 'jsonp'//使用jsonp
  },
  map : {//由于返回数据源的数据信息跟定义的不一致
    isleaf : 'leaf', //将数据中的isleaf字段映射成leaf字段
    id : 'value'
  }
});   

new BUI.Form.Group.Select({
  srcNode: '#g1',
  store : store
});       
        </pre>
        <p>但是我们的表单都是统一生成的，表单分组的配置项都是配置到DOM上，上面的Store的配置项过于复杂，所以我们设计了一种机制：</p>
        <ol>
          <li>将一种Store的配置项定义成一个类型<code>type</code>。</li>
          <li>在生成表单时，在分组上指定类型。</li>
        </ol>
        <pre class="prettyprint linenums">
//定义类型          
BUI.Form.Group.Select.addType('name',{
  proxy : {//加载数据的配置项
    url : 'http://..../data/json',
    dataType : 'jsonp'//使用jsonp
  },
  map : {//由于返回数据源的数据信息跟定义的不一致
    isleaf : 'leaf', //将数据中的isleaf字段映射成leaf字段
    id : 'value'
  }
});

//配置类型
&lt;div class="bui-form-group-select" data-type="name"&gt;
  &lt;label&gt;省市联动：&lt;/label&gt;
  &lt;select class="input-small" name="province" value="1"&gt;
    &lt;option&gt;请选择省&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="input-small"  name="city" value="12"&gt;&lt;option&gt;请选择市&lt;/option&gt;&lt;/select&gt;
  &lt;select class="input-small"  name="county" value="121"&gt;&lt;option&gt;请选择县/区&lt;/option&gt;&lt;/select&gt;
&lt;/div&gt;
        </pre>

      </div>
    </div>
    <div class="row">
      <div class="span8">
        <h2>内置的类型</h2>
        <p>目前仅内置了一种类型的级联选择框<code>city</code>,用于省市县</p>
      </div>
      <div class="span16">
        <h3>示例</h3>
        <p>省、市、县的默认值在select中设置value，通过字符串进行匹配</p>
        <form id="J_Form4">
          <div class="bui-form-group-select" data-type="city">
            <label>省市联动：</label>
            <select class="input-small" name="province" value="山东省">
              <option>请选择省</option>
            </select>
            <select class="input-small"  name="city"><option>请选择市</option></select>
            <select class="input-small"  name="county"><option>请选择县/区</option></select>
          </div>
        </form>
        <pre class="prettyprint linenums">
&lt;form id="J_Form4"&gt;
  &lt;div class="bui-form-group-select" data-type="city"&gt;
    &lt;label&gt;省市联动：&lt;/label&gt;
    &lt;select class="input-small" name="province" value="山东省"&gt;
      &lt;option&gt;请选择省&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class="input-small"  name="city"&gt;&lt;option&gt;请选择市&lt;/option&gt;&lt;/select&gt;
    &lt;select class="input-small"  name="county"&gt;&lt;option&gt;请选择县/区&lt;/option&gt;&lt;/select&gt;
  &lt;/div&gt;
&lt;/form&gt;          
        </pre>
      </div>
    </div>
    <div class="row">
      <div class="span8">
        <h2>使用页面内的数据</h2>
        <p>使用页面内的数据可以直接配置TreeStore的<code>data</code>属性，但是在配置项中配置过于复杂，所以：</p>
         <ol>
          <li>将一种Store的配置项定义成一个类型<code>type</code>。</li>
          <li>在生成表单时，在分组上指定类型。</li>
        </ol>
        <p>在项目实践过程中，一个级联选择框往往会反复使用，所以最好定义一次类型，在各个页面中统一使用。</p>
      </div>
      <div class="span16">
        <h3>示例</h3>
        <form id="J_Form5">
          <div class="bui-form-group-select" data-type="test">
            <label>省市联动：</label>
            <select class="input-small" name="province">
              <option>请选择省</option>
            </select>
            <select class="input-small"  name="city"><option>请选择市</option></select>
            <select class="input-small"  name="county"><option>请选择县/区</option></select>
          </div>
        </form>
        <pre class="prettyprint linenums">
var data = [{"id" : "1","text":"山东","children":[
  {"id":"11","text":"济南","leaf":false},
  {"id":"12","text":"淄博","leaf":false,"children":[
    {"id":"121","text":"高青","leaf":true}
  ]}
]}];
BUI.Form.Group.Select.addType('test',{
  data : data
});

new Form.Form({
  srcNode : '#J_Form5'
}).render();
        </pre>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>

  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>
  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    $(function () {
      prettyPrint();
    });
  </script>   
<script type="text/javascript">
  BUI.use('bui/form',function (Form) {
    new Form.Form({
      srcNode : '#J_Form1'
    }).render();

    new Form.Form({
      srcNode : '#J_Form2'
    }).render();

    new Form.Form({
      srcNode : '#J_Form3'
    }).render();

    new Form.Form({
      srcNode : '#J_Form4'
    }).render();

    var data = [{"id" : "1","text":"山东","children":[
      {"id":"11","text":"济南","leaf":false},
      {"id":"12","text":"淄博","leaf":false,"children":[
        {"id":"121","text":"高青","leaf":true}
      ]}
    ]}];
    BUI.Form.Group.Select.addType('test',{
      data : data
    });

    new Form.Form({
      srcNode : '#J_Form5'
    }).render();


  });
</script>

<body>
</html>  